import { Form } from "antd";
import styled from "styled-components";
const borderColor = "#000";
export const StyledPreviewDevice = styled.div`
	/* width: 400px; */
	width: 22vw;
	/* height: 725px; */
	height: 38vw;
	/* overflow: hidden; */
	border: 8px solid ${borderColor};
	border-radius: 14px;
	position: relative;
	&::before {
		content: "";
		position: absolute;
		width: 8px;
		height: 94px;
		border-radius: 8px;
		right: -12px;
		top: 150px;
		background-color: ${borderColor};
	}
	&::after {
		content: "";
		position: absolute;
		width: 8px;
		height: 45px;
		border-radius: 8px;
		right: -12px;
		top: 254px;
		background-color: ${borderColor};
	}
`;
export const StyledCCD = styled.div`
	width: 16px;
	height: 16px;
	border: 3.7px solid ${borderColor};
	border-radius: 50%;
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
`;
export const StyledScreen = styled.div`
	/* width: 385px; */
	/* width: 471px; */
	width: calc(22vw - 16px + 86px);
	/* height: 680px; */
	height: calc(38vw - 16px - 32px);
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	/* border: 1px solid #ccc; */
`;
export const StyledNavBar = styled.div`
	/* width: 385px; */
	widht: calc(22vw - 16px);
	height: 28px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	position: relative;
	/* border: 1px solid #ccc; */
`;
export const StyledDots = styled.div`
	.normal {
		width: 20px;
		&:hover {
			background-color: #fff !important;
			box-shadow: 0 0 2px 2px #00000030;
			width: 24px;
		}
	}
	.active {
		width: 24px;
	}
	.dot {
		height: 5px;
		transition: width 0.2s linear;
	}
`;
export const StyledUploadBox = styled.div`
	width: 200px;
	height: 130px;
	&:hover {
		background-color: #cccccc70;
	}
`;
export const StyledImgWrapper = styled.div`
	&:hover {
		background-color: #000;
		.mask {
			display: flex;
		}
	}
	.mask {
		display: none;
		background-color: #00000090;
	}
`;
export const StyledSwiperEditoWrapper = styled.div`
	height: calc(100vh - 180px);
`;
export const StyledCatEditorWrapper = styled.div`
	height: calc(100vh - 180px);
`;
export const StyledSwiperForm = styled(Form)`
	width: 580px;
`;
export const StyledEditorArea = styled.div`
	border-left: 1px solid #ccc;
	height: calc(100vh - 185px);
	> button {
		left: 50%;
		transform: translateX(-50%);
	}
`;
export const StyledUploadButton = styled.div`
	&:hover {
		background-color: #cccccc70;
	}
`;
export const StyledIconWrapper = styled.div`
	.mask {
		display: none;
	}
	&:hover {
		.mask {
			display: flex;
			background-color: rgba(0, 0, 0, 0.35);
		}
	}
`;
export const StyledHorizontalGoodsModuleContent = styled.div`
	min-height: 240px;
`;
export const StyledHorizontalGoodsItem = styled.div`
	border: 1px solid #f09037;
	width: 48.5%;
	background-color: #fff;
`;
export const StyledHorizontalGoodsImgWrapper = styled.div`
	min-height: 100px;
`;
export const StyledVerticalGoodsModuleContent = styled.div`
	min-height: 130px;
`;
export const StyledVerticalGoodsItem = styled.div`
	border: 1px solid #f09037;
	background-color: #fff;
`;
export const StyledVerticalGoodsImgWrapper = styled.div`
	width: 130px;
`;
export const StyledRichTextModule = styled.div`
	width: calc(22vw - 16px);
	min-height: 24vh;
	img{
		width: 100%;
	}
`;
export const StyledEmptyRichText = styled.div`
	height: 24vh;
`;